<template>
  <div class="wrapper">
    <!-- 头部搜索框 -->
    <el-form :model="queryParams" ref="queryForm" :inline="true">
      <el-form-item label="航次号">
        <el-input
          v-model="queryParams.voyageNumber"
          placeholder="请输入航次号"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="始发港">
        <el-input
          v-model="queryParams.departurePort"
          placeholder="请输入始发港"
          clearable
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery"
          >搜索
        </el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <z-table
      ref="table"
      :tableOption="tableOption"
      :queryParams="queryParams"
      @getData="handleQuery"
    >
      <template #topMenu>
        <el-button
          @click="showFormDialog('add')"
          icon="el-icon-plus"
          type="primary"
          >新增评分内容
        </el-button>
        <el-button @click="clearSelect" type="primary">清空选中</el-button>
      </template>
      <template #shipId="scope">
        <span>{{ scope.row.shipId + "---" }}</span>
      </template>
      <template #voyageNumber="scope">
        <span>{{ "航次slot: " + scope.row.voyageNumber }}</span>
      </template>
      <template #menu="scope">
        <el-button type="text" @click="showFormDialog('view', scope.row.id)"
          >详情
        </el-button>
        <el-button type="text" @click="showFormDialog('edit', scope.row.id)"
          >编辑
        </el-button>
        <el-button type="text" @click="delDescription(scope.row.id)"
          >删除
        </el-button>
      </template>
    </z-table>
    <formDialog ref="dialog"></formDialog>
  </div>
</template>

<script>
import { getByCode } from "@/api/dicData/dicData";
import { tableOption } from "./option";
import formDialog from "./formDialog";

export default {
  name: "demo01",
  components: {
    formDialog,
  },
  data() {
    return {
      /* 必须开始 */
      queryParams: {},
      /* 必须开始 */
      shipArr: [],
    };
  },
  computed: {
    /* 必须开始 */
    tableOption() {
      return tableOption.call(this);
    },
    /* 必须开始 */
  },
  mounted() {
    getByCode("tenantShip").then((res) => {
      this.shipArr = res;
      this.$refs.table.handleQuery(true);
    });
  },
  methods: {
    /* 必须开始 */
    handleQuery() {
      this.$refs.table.handleQuery(true);
    },
    resetQuery() {
      this.queryParams = {};
      this.$nextTick(() => {
        this.handleQuery();
      });
    },
    showFormDialog(type, id) {
      this.$refs.dialog.show(type, id);
    },
    /* 必须结束 */
    rowClick(...a) {
      console.log(...a);
    },
    clearSelect() {
      this.$refs.table.clearSelection();
    },
  },
};
</script>

<style scoped></style>
